import React from 'react';
import ReactDOM from "react-dom";
import * as PropTypes from 'prop-types'
import { connect } from 'dva';
import styles from './index.less';
import {Row, Col,} from 'antd';
import {MapContext,Util,Controls} from '..';

import 'ol/ol.css'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import { defaults as defaultControls, Attribution } from 'ol/control.js'
import Projection from 'ol/proj/Projection'
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
    this.options = {
      controls: defaultControls({ attribution: false, zoom: false }).extend([
        new Attribution({ collapsible: false }),
      ]),
      pixelRatio: undefined,
      interactions: undefined,
      keyboardEventTarget: undefined,
      layers: undefined,
      maxTilesLoading: undefined,
      moveTolerance: undefined,
      overlays: undefined,
      target: undefined,
      view: {
        projection: 'EPSG:3857',
        center:[12950795.908819556, 4903290.508084635],
        zoom: 10,
        minZoom: 5,
        maxZoom: 18
      },
    }
    this.map = new Map()
    this.layers = []
    this.controls = []
    this.overlays = []
    this.MapContext = {mapComp: this}
  }

  componentDidMount() {
    this.init();
  }
  componentWillUnmount() {
    this.map && this.map.setTarget(undefined)
  }
  init = () => {
    this.initMap();
  };

  initMap = () => {
    Util.updateOptions(this.options,this.props)
    // init view
    this.options.view = new View(this.options.view)
    // init target
    this.options.target = this.options.target || ReactDOM.findDOMNode(this.mapRef)
    // init controls
    let controlsComp = Util.findChild(this.props.children, Controls) || {};
    this.options.controls =  defaultControls(controlsComp.props).extend(this.controls)
    // init layers
    this.options.layers = this.layers;
    this.map = new Map(this.options)
    this.map.on('moveend',function (target) {
        // alert(111)
    })
  };
  render() {
    return (
      <div className={styles.Index}ref={(ref)=>{this.mapRef = ref}}>
            <MapContext.Provider value={this.MapContext}>
              {this.props.children}
            </MapContext.Provider>
      </div>
    );
  }
}
Index.propTypes = {
  onRef: PropTypes.func,
}
export default Index;
